<template>
  <view>
    <view>
      <view class="mine-container">
        <!--顶部个人信息栏-->
        <view
            class="header-section"
            :style="{
            background: 'url(' + homebg + ') no-repeat',
            backgroundSize: '100% 100%',
          }"
        >
          <view class="flex padding justify-between">
            <view class="flex align-center">
              <view v-if="!avatar" class="cu-avatar xl round bg-white">
                <view class="iconfont icon-people text-gray icon"></view>
              </view>
              <image
                  v-if="avatar"
                  @click="handleToAvatar"
                  :src="avatar"
                  class="cu-avatar xl round"
                  mode="widthFix"
              >
              </image>

              <view class="info">
                <view v-if="!name" @click="handleToLogin" class="login-tip">
                  <text style="font-size: 0.8rem">点击登录</text>
                </view>
                <view v-if="name" @click="handleToInfo" class="user-info">
                  <view class="u_title">{{ name }}</view>
                </view>
                <view class="vip">
                  <view v-if="userType==='2'">
                    <text style="color: brown; font-size: 0.5rem">认证律师</text>
                  </view>
                  <view v-else-if="!showVip ">
                    <image
                        src="../../static/images/mine/vipf.png"
                        mode="scaleToFill"
                        style="width: 30rpx; height: 30rpx"
                    />
                    <text style="color: brown; font-size: 0.5rem">去认证</text>
                  </view>
                  <view v-else class="box">
                    <image
                        src="http://211.149.139.63:8080/profile/upload/2023/02/13/vip买家秀_20230213161311A002.png"
                        mode="scaleToFill"
                        style="width: 30rpx; height: 30rpx"></image>
                    <text style="color: brown; font-size: 0.5rem">{{vipUserType}}</text>
                  </view>

                </view>
              </view>
            </view>
            <view @click="handleToInfo" class="flex align-center" v-if="userInfoShow">
              <text>个人信息</text>
              <view class="iconfont icon-right"></view>
            </view>
          </view>
          <view class="footer flex-row">
            <view class="notVip lawyer-info"  v-if="userType==='2'">
               <text>{{lawyerName}}</text>
              <text>{{lawyerNum}}</text>

            </view>
            <view class="notVip" @click="handleEnableVip" v-else-if="!showVip">
              <text class="title">开通会员尽享特权</text>
              <image
                  src="../../static/images/mine/open-vip.png"
                  style="width: 1rem; height: 1rem"
              ></image>
            </view>
            <view class="notVip" v-else>
              <view class="left">
                <text>已开通VIP会员</text>
                <text class="small">还有{{ dueDay }}天到期</text>
              </view>
              <view class="right">
                <view class="box">
                  <u-tag text="立即升级" plain type="warning" shape="circle" size="mini" @click="handleToUpdateVip"></u-tag>
                  <view style="margin-left: 0.5rem"></view>
                  <u-tag text="立即续费" plain type="warning" shape="circle" size="mini" @click="handleToUpdateVip"></u-tag>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="content-section">
          <text class="title">{{userType==='1'?'我的订单':'工作台'}}</text>
          <view class="line">
            <u-line></u-line>
          </view>

          <view class="order-container">
            <view class="container">
              <view class="action-item" @click="handleAllOrder">
                <image
                    src="../../static/images/mine/order1.png"
                    mode="scaleToFill"
                    class="action-icon"
                />
                <text class="text">全部订单</text>
              </view>
              <view class="action-item" @click="handlePayOrder" v-if="userType==='1'">
                <image
                    src="../../static/images/mine/complete-1.png"
                    mode="scaleToFill"
                    class="action-icon"
                />
                <text class="text">待支付</text>
              </view>
              <view class="action-item" @click="handleIngOrder">
                <image
                    src="../../static/images/mine/ing1.png"
                    mode="scaleToFill"
                    class="action-icon"
                />
                <text class="text">进行中</text>
              </view>
              <view class="action-item" @click="handleCompletedOrder">
                <image
                    src="../../static/images/mine/completed.png"
                    mode="scaleToFill"
                    class="action-icon"
                />
                <text class="text">已完成</text>
              </view>
            </view>
          </view>

          <view class="menu-list">
            <view class="list-cell list-cell-arrow" @click="handleToEditInfo" v-if="userType==='1'">
              <view class="menu-item-box">
                <view class="iconfont icon-user menu-icon"></view>
                <view>律师入驻</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow">
              <view class="menu-item-box">
                <view class="iconfont icon-kefu menu-icon"></view>
                <button class="btn" open-type="contact">联系客服</button>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="handleAbout">
              <view class="menu-item-box">
                <view class="iconfont icon-guanyuwomen menu-icon"></view>
                <view>关于我们</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="handleToInvite" v-if="showVip || userType==='2'">
              <view class="menu-item-box">
                <view class="iconfont icon-tuiguang menu-icon"></view>
                <view>推广中心</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="handleToSetting">
              <view class="menu-item-box">
                <view class="iconfont icon-setting menu-icon"></view>
                <view>设置</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "../../components/nav-bar.vue";
import bgBase64 from "@/static/const/bgBase64.js";
import {getStorage, setStorage} from "@/utils/auth";
import application from "@/static/const/application";
import {isEmptyString} from "@/utils/common";

export default {
  components: {navBar},
  data() {
    return {
      name: "",
      version: getApp().globalData.config.appInfo.version,
      marginTop: "",
      homebg: bgBase64.minBg,
      id: "",
      showVip: false,
      dueDay: 0,
      userInfoShow: true,
      userType:"1",
      lawyerName:"",
      lawyerNum:"",
    };
  },
  onLoad(options) {
    const top = uni.getSystemInfoSync().statusBarHeight + 44;
    this.marginTop = "padding-top:" + top + "px";
    this.homeBg = bgBase64.minBg;
    this.id = getStorage(application.user).userId;
    if(isEmptyString(this.id)){
      this.userInfoShow = false;
    }
  },
  onShow() {
    const that = this;
    uni.$on("updateUser", function (data) {
      if (data.msg == "页面更新") {
        that.getUser();
      }
    });
    this.getUser();
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar;
    },
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50;
    },
    //截止天数

    //vip类型
    vipUserType() {
      const vipId = getStorage(application.user).vipId;
      if (isEmptyString(vipId) || vipId === "0") {
        return "去认证";
      } else {
        return "VIP会员";
      }
    },
  },
  methods: {
    getUser() {
      if (isEmptyString(this.id)) {
        return;
      }
      this.$store.dispatch("GetUserInfoByUserId", this.id).then((response) => {
        this.name = response.data.nickName;
        this.userType = response.data.userType;
        setStorage(application.user, response.data);
        const vipId =  response.data.vipId;
        if (isEmptyString(vipId) || vipId === "0") {
          this.showVip = false;
        } else {
          this.showVip = true;
        }
        this.dueDay = this.day();
        if(this.userType === "2") {
          this.homebg= bgBase64.minLawyerBg;
          const that= this;
          this.$store.dispatch("LawyerInfo", this.id).then((response) => {
            that.lawyerName = response.data.name;
            that.lawyerNum = response.data.lawLawyer.num;
          });
        }
      });
    },
    //获取截止天数
    day() {
      const vipEndTime = getStorage(application.user).vipDueDate;
      if (isEmptyString(vipEndTime)) {
        return 0;
      }
      const now = new Date().getTime();
      const endTime = new Date(vipEndTime).getTime();
      const day = parseInt((endTime - now) / (1000 * 60 * 60 * 24));
      return day;
    },
    handleToInfo() {
      this.$tab.navigateTo("/pages/mine/info/index");
    },
    handleToEditInfo() {
      this.$tab.navigateTo("/pages/mine/info/edit");
    },
    handleToSetting() {
      this.$tab.navigateTo("/pages/mine/setting/index");
    },
    handleToLogin() {
      uni.reLaunch({
        url: "/pages/login",
      });
    },
    handleToAvatar() {
      this.$tab.navigateTo("/pages/mine/avatar/index");
    },
    handleLogout() {
      this.$modal.confirm("确定注销并退出系统吗？").then(() => {
        this.$store.dispatch("LogOut").then(() => {
          this.$tab.reLaunch("/pages/index");
        });
      });
    },
    handleAbout() {
      this.$tab.navigateTo("/pages/mine/about/index");
    },
    //跳转去全部订单
    handleAllOrder() {
      if(this.userType==='1'){
        uni.navigateTo({
          url: "/pages/order/orderAll",
        });
      }else{
        uni.navigateTo({
          url: "/pages/order/lawOrderAll",
        });
      }

    },
    //跳转去已完成订单
    handleCompletedOrder() {
      if (this.userType === "1") {
        uni.navigateTo({
          url: "/pages/order/orderCompleted",
        });
      } else {
        uni.navigateTo({
          url: "/pages/order/lawOrderCompleted",
        });
      }
    },
    //跳转去待支付订单
    handlePayOrder() {
      uni.navigateTo({
        url: "/pages/order/orderPay",
      });
    },
    //跳转去进行中订单
    handleIngOrder() {
      if(this.userType==='1') {
        uni.navigateTo({
          url: "/pages/order/orderIng",
        });
      }else{
        uni.navigateTo({
          url: "/pages/order/lawOrderIng",
        });
      }
    },
    //跳转到开通vip页面
    handleEnableVip() {
      uni.navigateTo({
        url: "/pages/vip/enableVip",
      });
    },
    //跳转去推广中心
    handleToInvite() {
      uni.navigateTo({
        url: "/pages/invite/index",
      });
    },
    //跳转去升级vip页面
    handleToUpdateVip() {
      uni.navigateTo({
        url: "/pages/vip/updateVip",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  // background-color: #f5f6f7;
}

.mine-container {
  width: 100%;
  height: 100%;
  background-color: #ffffff;

  .header-section {
    // background: url("../../static/images/mine/bg.png") no-repeat center center;

    background-size: 100% 100% !important;
    color: white;
    padding-top: 0px;
    padding-bottom: 4rem;
    padding-top: 4rem;
    position: relative;

    .login-tip {
      font-size: 18px;
      margin-left: 10px;
      margin-bottom: 10px;
    }

    .cu-avatar {
      border: 2px solid #eaeaea;

      .icon {
        font-size: 40px;
      }
    }

    .user-info {
      margin-left: 15px;
      z-index: 999;

      .u_title {
        font-size: 1rem;
        line-height: 30px;
      }
    }

    .footer {
      position: absolute;
      left: 22%;
      bottom: 9%;
      width: 100%;
      height: 1.5rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      text {
        margin-right: 1.5rem;
      }

      .notVip {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
      .lawyer-info{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }

      .left {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .small {
          font-size: 0.7rem;
          color: #fff;
          margin-top: 0.25rem;
        }
      }

      .right {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 0.5rem;

        .box {
          width: 100%;
          display: flex;
        }
      }
    }
  }

  .content-section {
    position: relative;
    // top: -4rem;
    padding-top: 0.5rem;

    .title {
      padding-left: 1rem;
      padding-bottom: 1rem;
      padding-top: 1rem;
      font-size: 1rem;
    }

    .line {
      margin-top: 1rem;
    }

    .mine-actions {
      margin: 15px 15px;
      padding: 20px 0px;
      border-radius: 8px;
      padding-bottom: 0px;

      .action-item {
        .icon {
          font-size: 28px;
        }

        .text {
          display: block;
          font-size: 0.7rem;
          margin: 8px 0px;
        }
      }
    }
  }
}

.infor {
  display: flex;
  flex-direction: column;
}

.vip {
  background-color: #fff;
  border-radius: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20rpx;
  padding-left: 20rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  width: 5rem;

  image {
    width: 50rpx;
    height: 50rpx;
  }

  text {
    margin-left: 20rpx;
  }
  .box{
    display: flex;
    flex-direction: row;
    align-items: center;

  }
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
}

.order-container {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding-top: 40rpx;
    padding-bottom: 20rpx;

    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon {
        font-size: 40px;
      }

      .text {
        font-size: 0.7rem;
        margin-top: 20rpx;
      }
    }
  }
}

.menu-list {
  .menu-item-box {
    .menu-icon {
      padding-right: 20rpx;
    }
  }

  .btn {
    margin-left: 0px;
    background: none;
    font-size: 14px;
    padding-left: 0px;
    color: #333;
    width: 80%;
    text-align: left;
    line-height: normal;

    &::after {
      border: none;
    }
  }
}
</style>
